<template>
  <z-publicFrame>
    <template #header>
      <el-page-header @back="goBack" content="添加">
      </el-page-header>
    </template>
    <template #container>
      <div class="formStyle">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">

          <el-form-item v-for="(item,key) in formView" :key="key" :prop="item.model" :label="item.label">
            <template v-if="item.model === 'roles'">
              <el-checkbox-group v-model="form[item.model]">
                <el-checkbox v-for="(item,index) in roles" :key="index" :label="item.code" name="role">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else-if="item.model === 'locked'">
              <el-radio-group v-model="form[item.model]">
                <el-radio :label="0">公开</el-radio>
                <el-radio :label="1">锁定</el-radio>
              </el-radio-group>
            </template>
            <template v-else>
              <el-input :type="item.type" v-model="form[item.model]"></el-input>
            </template>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd">立即增加</el-button>
          </el-form-item>
        </el-form>

      </div>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'
export default {
  name: 'add',
  components: {
    'z-publicFrame': PublicFrame
  },
  props: ['menus'],
  data() {
    return {
      api: {
        add: this.$api.user.add,
        role_list: this.$api.role.list
      },
      rules: {
        userAccount: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        userPw: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      form: {
        userAccount: null,
        fullName: null,
        locked: null,
        roles: [],
        userConfig: null,
        userPw: null
      },
      formView: [
        { model: 'userAccount', label: '用户账号', type: 'text' },
        { model: 'userPw', label: '用户密码', type: 'password' },
        { model: 'fullName', label: '用户姓名', type: 'text' },
        { model: 'locked', label: '是否锁定', type: 'text' },
        { model: 'roles',
          label: '角色列表',
          type: 'text' },
        { model: 'userConfig', label: '用户配置', type: 'textarea' }

      ],
      roles: [],
      test: this.roles

    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    async handleAdd() {
      this.$httpTemplate({ url: this.api.add, json: this.form })
    },
    handleRoles() {
      this.$httpTemplate({ url: this.api.role_list }, data => {
        this.roles = data.data.data.role
      })
    }
  },
  created() {
    this.handleRoles()
    console.dir(this.test)
  }
}
</script>

<style scoped>
  .el-page-header {
    margin: 15px 0;
    overflow: hidden;
  }
  div.formStyle {
    margin-top: 30px;

  }
  .menu-list{
    float: left;
    width: 35%;
  }
  .api-list{
    overflow: auto;
  }
  .permission-block {
    margin: 20px 20px;
    height: 300px;
  }

</style>
